<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>日期价格</title>
    <link rel="stylesheet" href="../../../css/aui.css"/>
    <link rel="stylesheet" href="../../../css/index/hotel/star_price.css">
    <link rel="stylesheet" href="../../../css/index/hotel/star_price_public.css">
    <link rel="stylesheet" href="../../../css/index/hotel/ion.rangeSlider.css">
    <script src="../../../script/extend/jquery-3.3.1.min.js"></script>
    <script src="../../../script/aui/api.js"></script>
    <script src="../../../script/extend/hotel/ion.rangeSlider.js"></script>
</head>
<style>
    body{
        background: transparent;
    }
    .selectClass{
        position: absolute;
        bottom: -310px;
        z-index: 2;
    }
    .mask_calendar {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.4);
        display: none;
        z-index: 1;
    }
</style>

<body class="body" style="cursor: pointer;">
    <!-- 主内容区 -->
    <!--<div class="bigBox">
        &lt;!&ndash; 导航栏 &ndash;&gt;
        <div class="navBigBox ">
            <div class="navBox clearfix">
        </div>
    </div>-->
    <!-- 星级价格 -->
    <div class="selecteList_fisrt selectClass selecteList_month" style="text-align: center;">
        <ul class="nmonthlyPayment_ul clearfix" style="margin:0 auto;">
            <li data-val="1"><p>客栈</p></li>
            <li data-val="3"><p>三星/舒适</p></li>
            <li data-val="4"><p>四星/高档</p></li>
            <li data-val="5"><p>五星/豪华</p></li>
            <li data-val="A"><p>公寓</p></li>
            <li class="selected nmonthlyPayment_noLimit" data-val=""><p>不限</p></li>
        </ul>
        <!-- 左右滑动 -->
        <div class="moveBox">
            <div class="moveTitle clearfix"><p class="fl">价格选择</p><p class="changeNum bxyc fr" data-leftNum="0" data-rightNum="1000">1000+</p></div>
            <div class="moveContent">
                <input type="text" value="1111" class="range_2" />
                <!--<div class="moveScale">
                    <p>0</p>
                    <p class="nmonthlyPayment_p_1">1000</p>
                    <p class="nmonthlyPayment_p_2">2000</p>
                    <p class="nmonthlyPayment_p_3">3000</p>
                    <p class="nmonthlyPayment_p_4">4000</p>
                    <p class="nmonthlyPayment_p_5">5000</p>
                    <p>不限</p>
                </div>-->
            </div>
        </div>
        <!-- 确定 -->
        <div class="confirmButton confirmButton2">
            <a href="javascript:void(0);">确定</a>
        </div>
    </div>
    <div class="mask_calendar"></div>
    <script src="../../../script/extend/hotel/star_price.js"></script>

</body>
<script>
    apiready = function() {
        api.parseTapmode();
        var data = $api.getStorage('TOUCH_START_PRICE_BAR');
        console.log(JSON.stringify(data));
        if (data) {
            data = JSON.parse(data);
            console.log(data.star[1]);
            $('.nmonthlyPayment_ul').find("p:contains("+ data.star[1] +")").parent().addClass('selected').siblings().removeClass('selected');
        }
        $('.selectClass').animate({bottom:0},200);

        $(".mask_calendar").show().on("click", function(e){
            api.sendEvent({
                name: 'cancelCheckEv'
            });
            $('.selectClass').animate({bottom: -310},200);
            setTimeout(function () {
                api.closeFrame({
                    name: 'star_price_frm'
                });
            },200)
        });
    };
</script>
</html>

